/* eslint-disable no-alert */
import { Box, InputAdornment, Stack } from '@mui/material'
import { useFormik } from 'formik'
import { Icon } from 'lago-design-system'
import { useRef } from 'react'
import { generatePath, Link } from 'react-router-dom'
import styled, { css } from 'styled-components'
import { boolean, number, object, string } from 'yup'

import { AnalyticsStateProvider } from '~/components/analytics/AnalyticsStateContext'
import {
  Accordion,
  Alert,
  ALL_ICONS,
  Avatar,
  AvatarBadge,
  Button,
  ButtonLink,
  ChargeTable,
  Chip,
  Dialog,
  DialogRef,
  Drawer,
  HorizontalDataTable,
  IconName,
  NavigationTab,
  Popper,
  Selector,
  ShowMoreText,
  Skeleton,
  Status,
  StatusType,
  Table,
  Tooltip,
  Typography,
} from '~/components/designSystem'
import {
  ButtonSelectorField,
  Checkbox,
  CheckboxField,
  ComboBoxField,
  DatePickerField,
  JsonEditorField,
  MultipleComboBox,
  MultipleComboBoxField,
  RadioField,
  SwitchField,
  TextInputField,
} from '~/components/form'
import { AmountInputField } from '~/components/form/AmountInput'
import { GenericPlaceholder } from '~/components/GenericPlaceholder'
import { addToast } from '~/core/apolloClient'
import { intlFormatNumber } from '~/core/formats/intlFormatNumber'
import { ONLY_DEV_DESIGN_SYSTEM_ROUTE, ONLY_DEV_DESIGN_SYSTEM_TAB_ROUTE } from '~/core/router'
import { deserializeAmount } from '~/core/serializers/serializeAmount'
import { formatDateToTZ } from '~/core/timezone'
import { CurrencyEnum, TimezoneEnum } from '~/generated/graphql'
import {
  chargeTableData,
  currentUsageTableData,
  fakeDataHorizontalTable,
  POSSIBLE_TOAST,
  tableData,
} from '~/pages/__devOnly/fixtures'
import EmptyImage from '~/public/images/maneki/empty.svg'
import ErrorImage from '~/public/images/maneki/error.svg'
import Stripe from '~/public/images/stripe.svg'
import { MenuPopper, PageHeader, theme } from '~/styles'
import { tw } from '~/styles/utils'

const FORM_TAB_URL = generatePath(ONLY_DEV_DESIGN_SYSTEM_TAB_ROUTE, { tab: 'form' })
const LINK_TAB_URL = generatePath(ONLY_DEV_DESIGN_SYSTEM_TAB_ROUTE, { tab: 'links' })
const DISPLAY_TAB_URL = generatePath(ONLY_DEV_DESIGN_SYSTEM_TAB_ROUTE, { tab: 'display' })
const BUTTON_TAB_URL = generatePath(ONLY_DEV_DESIGN_SYSTEM_TAB_ROUTE, { tab: 'button' })
const TYPOGRAPHY_TAB_URL = generatePath(ONLY_DEV_DESIGN_SYSTEM_TAB_ROUTE, { tab: 'typography' })
const ICONS_TAB_URL = generatePath(ONLY_DEV_DESIGN_SYSTEM_TAB_ROUTE, { tab: 'icons' })
const AVATAR_TAB_URL = generatePath(ONLY_DEV_DESIGN_SYSTEM_TAB_ROUTE, { tab: 'avatar' })
const SKELETON_TAB_URL = generatePath(ONLY_DEV_DESIGN_SYSTEM_TAB_ROUTE, { tab: 'skeleton' })
const TABLE_TAB_URL = generatePath(ONLY_DEV_DESIGN_SYSTEM_TAB_ROUTE, { tab: 'table' })

const DesignSystem = () => {
  const dialogRef = useRef<DialogRef>(null)
  const formikProps = useFormik({
    initialValues: {
      checkbox: false,
      amountCents: undefined,
      amountCurrency: CurrencyEnum.Usd,
      date: undefined,
      time: undefined,
      input: undefined,
      inputNumber: undefined,
      switch: true,
      combobox: undefined,
      multipleCombobox: [],
      radio: false,
      buttonSelector: undefined,
      buttonSelector2: 'time',
      checkboxCond1: true,
      checkboxCond2: true,
      json: {
        age: '41 years old',
        home: {
          country: 'United States',
          address: '317 example street',
        },
        friends: [],
      },
      jsonLong: {
        age: '41 years old',
        home: {
          country: 'United States',
          address: '317 example street',
        },
        friends: [
          'Lucille, Ellissa',
          'Korry, Shawn',
          'Auguste, Gina',
          'Guinna, Aime',
          'Faustine, Rozalie',
        ],
      },
      jsonEmpty: undefined,
    },
    validationSchema: object().shape({
      checkbox: boolean().required(),
      amountCurrency: string().required(),
      amountCents: number().required(),
      json: string().required(),
      date: string()
        .required()
        .matches(/1992-05-26/, 'Sorry, you owe her a beer 🍺'),
      time: string().required(),
      input: string()
        .required()
        .matches(/whatever/, "I thought you'd be more fun... 😏"),
      radio: string()
        .required()
        .matches(/whatever/, 'Really ? 🙄'),
      combobox: string().required().matches(/Mike/, "No, it's Mike 😡"),
      buttonSelector: string()
        .required()
        .matches(/whatever/, 'Interesting... '),
    }),
    onSubmit: () => {},
  })

  return (
    <>
      <PageHeader.Wrapper withSide>
        <Typography variant="bodyHl" color="textSecondary" noWrap>
          Design System components
        </Typography>
        <Typography variant="caption">Only visible in dev mode</Typography>
      </PageHeader.Wrapper>
      <NavigationTab
        className="px-12"
        name="Design system tab switcher"
        tabs={[
          {
            title: 'Display',
            link: DISPLAY_TAB_URL,
            match: [DISPLAY_TAB_URL, ONLY_DEV_DESIGN_SYSTEM_ROUTE],
            component: (
              <Container>
                <Typography className="mb-4" variant="headline">
                  Accordion
                </Typography>
                <Stack gap={6} marginBottom={6}>
                  <Accordion size="medium" summary="medium accordion">
                    <Typography variant="body">Content of the accordion</Typography>
                  </Accordion>
                  <Accordion size="large" summary="large accordion">
                    <Typography variant="body">Content of the accordion</Typography>
                  </Accordion>
                  <Accordion
                    variant="borderless"
                    summary={
                      <div>
                        <Typography variant="subhead" className="mb-2">
                          borderless accordion
                        </Typography>
                        <Typography variant="caption">Caption</Typography>
                      </div>
                    }
                  >
                    <Typography variant="body">Content of the accordion</Typography>
                  </Accordion>
                </Stack>

                <Typography className="mb-4" variant="headline">
                  Alert
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <Alert
                    fullWidth
                    className="md:px-12"
                    type="danger"
                    ButtonProps={{
                      label: 'Retry',
                      onClick: () => alert('Retry clicked'),
                    }}
                  >
                    <Stack>
                      <Typography variant="body" color="grey700">
                        Invoice could not be fully refreshed.
                      </Typography>
                      <Typography variant="caption">
                        An issue with your tax provider connection occurred. Please contact the Lago
                        team to solve this issue.
                      </Typography>
                    </Stack>
                  </Alert>
                  <Alert type="info">I&apos;m an info alert</Alert>
                  <Alert type="success">I&apos;m a success alert</Alert>
                  <Alert type="warning">I&apos;m a warning alert</Alert>
                  <Alert type="danger">I&apos;m a danger alert</Alert>
                </Block>

                <Typography className="mb-4" variant="headline">
                  Chips
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <Chip label="Small" size="small" />
                  <Chip label="Default" />
                  <Chip label="Big" size="big" />
                  <Chip label="I have an icon" icon="scissor" />
                  <Chip
                    label="I have an icon and delete"
                    icon="percentage"
                    onDelete={() => {
                      // eslint-disable-next-line no-console
                      console.log('Chip clicked')
                    }}
                  />
                  <Chip
                    label="Tooltip on icon"
                    icon="scissor"
                    deleteIconLabel="Delete"
                    onDelete={() => {
                      // eslint-disable-next-line no-console
                      console.log('Chip clicked')
                    }}
                  />
                  <Chip
                    error
                    label="I have an error"
                    icon="scissor"
                    onDelete={() => {
                      // eslint-disable-next-line no-console
                      console.log('Chip clicked')
                    }}
                  />
                  <Chip type="secondary" label="Small" size="small" />
                  <Chip type="secondary" label="Default" />
                  <Chip type="secondary" label="Big" size="big" />
                  <Chip
                    type="secondary"
                    label="I have an icon and delete"
                    icon="percentage"
                    onDelete={() => {
                      // eslint-disable-next-line no-console
                      console.log('Chip clicked')
                    }}
                  />
                  <Chip
                    type="secondary"
                    label="Tooltip on icon"
                    icon="scissor"
                    deleteIconLabel="Delete"
                    onDelete={() => {
                      // eslint-disable-next-line no-console
                      console.log('Chip clicked')
                    }}
                  />
                  <Chip
                    error
                    type="secondary"
                    label="I have an error"
                    icon="scissor"
                    onDelete={() => {
                      // eslint-disable-next-line no-console
                      console.log('Chip clicked')
                    }}
                  />
                </Block>

                <Typography className="mb-4" variant="headline">
                  Poppers
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <Drawer title="Imma supa drawa" opener={<Button>Drawer</Button>}>
                    <iframe
                      title="hey you"
                      src="https://giphy.com/embed/nNxT5qXR02FOM"
                      width="480"
                      height="399"
                      frameBorder="0"
                      allowFullScreen
                    ></iframe>
                  </Drawer>
                  <Button onClick={() => dialogRef.current?.openDialog()}>Dialog</Button>
                  <Dialog
                    ref={dialogRef}
                    title="Imma dialog"
                    description="And I'm happy to see you"
                    actions={({ closeDialog }) => (
                      <>
                        <Button variant="quaternary" onClick={() => closeDialog()}>
                          Oups
                        </Button>
                        <Button onClick={() => closeDialog()}>Ok bye</Button>
                      </>
                    )}
                  >
                    <Typography className="mb-4">
                      <iframe
                        title="Happy to see you"
                        src="https://giphy.com/embed/l2Jhok92mZ2PZHjDG"
                        width="480"
                        height="256"
                        frameBorder="0"
                        allowFullScreen
                      ></iframe>
                    </Typography>
                  </Dialog>
                  <Tooltip placement="top-end" title="Hola muchacho 🥸!">
                    <Button variant="secondary">Tooltip</Button>
                  </Tooltip>
                  <Popper
                    PopperProps={{ placement: 'bottom-end' }}
                    opener={<Button variant="tertiary">Popper</Button>}
                  >
                    {({ closePopper }) => (
                      <MenuPopper>
                        <Button startIcon="paperclip" variant="quaternary" align="left" fullWidth>
                          I&apos;m lazy
                        </Button>
                        <Button
                          startIcon="plug"
                          variant="quaternary"
                          align="left"
                          fullWidth
                          onClick={() => closePopper()}
                        >
                          I close the popper
                        </Button>
                      </MenuPopper>
                    )}
                  </Popper>
                  <Tooltip
                    placement="top-end"
                    title="Will trigger only if the toast does not already exists"
                  >
                    <Button
                      variant="tertiary"
                      onClick={() => {
                        const toastIndex = Math.floor(Math.random() * POSSIBLE_TOAST.length)

                        addToast(POSSIBLE_TOAST[toastIndex])
                      }}
                    >
                      I trigger a toast
                    </Button>
                  </Tooltip>
                </Block>

                <Typography className="mb-4" variant="headline">
                  Selector
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <Selector
                    title="A simple selector"
                    subtitle="with more info"
                    icon={
                      <Avatar variant="connector-full">
                        <Stripe />
                      </Avatar>
                    }
                    endIcon={<Chip label="With chip" />}
                    onClick={() => {}}
                    fullWidth
                  />
                  <Selector
                    title="A simple selector selected"
                    subtitle="Subtitle first"
                    titleFirst={false}
                    selected
                    icon="target"
                    endIcon={<Chip label="With chip" />}
                    onClick={() => {}}
                  />
                  <Selector
                    title="Non clickable selector"
                    subtitle="Alexandre Monjol"
                    titleFirst={false}
                    icon="user"
                  />
                  <Selector
                    title="A simple selector disabled"
                    subtitle="Subtitle first"
                    titleFirst={false}
                    disabled
                    icon={
                      <Avatar variant="connector">
                        <Stripe />
                      </Avatar>
                    }
                    endIcon={<Chip label="With chip" />}
                    onClick={() => {}}
                  />
                </Block>

                <Typography className="mb-4" variant="headline">
                  Status
                </Typography>
                <VerticalBlock>
                  <Block>
                    <Typography className="mb-4" variant="bodyHl" color="textSecondary">
                      Success
                    </Typography>
                    <Status
                      type={StatusType.success}
                      label="succeeded"
                      endIcon="warning-unfilled"
                    />
                    <Status type={StatusType.success} label="finalized" />
                    <Status type={StatusType.success} label="active" />
                    <Status type={StatusType.success} label="pay" />
                    <Status type={StatusType.success} label="available" />
                    <Status
                      type={StatusType.success}
                      label="refunded"
                      labelVariables={{ date: '2024-04-12' }}
                    />
                  </Block>
                  <Block>
                    <Typography className="mb-4" variant="bodyHl" color="textSecondary">
                      Warning
                    </Typography>
                    <Status type={StatusType.warning} label="failed" endIcon="warning-unfilled" />
                  </Block>
                  <Block>
                    <Typography className="mb-4" variant="bodyHl" color="textSecondary">
                      Outline
                    </Typography>
                    <Status type={StatusType.outline} label="draft" endIcon="warning-unfilled" />
                  </Block>
                  <Block>
                    <Typography className="mb-4" variant="bodyHl" color="textSecondary">
                      Default
                    </Typography>
                    <Status type={StatusType.default} label="pending" endIcon="warning-unfilled" />
                    <Status type={StatusType.default} label="toPay" />
                    <Status type={StatusType.default} label="n/a" />
                  </Block>
                  <Block>
                    <Typography className="mb-4" variant="bodyHl" color="textSecondary">
                      Danger
                    </Typography>
                    <Status type={StatusType.danger} label="disputed" endIcon="warning-unfilled" />
                    <Status type={StatusType.danger} label="disputeLost" />
                    <Status
                      type={StatusType.danger}
                      label="disputeLostOn"
                      labelVariables={{ date: '2024-04-12' }}
                    />
                    <Status type={StatusType.danger} label="terminated" />
                    <Status type={StatusType.danger} label="consumed" />
                    <Status type={StatusType.danger} label="voided" />
                  </Block>
                  <Block>
                    <Typography className="mb-4" variant="bodyHl" color="textSecondary">
                      Disabled
                    </Typography>
                    <Status type={StatusType.disabled} label="voided" endIcon="warning-unfilled" />
                  </Block>
                </VerticalBlock>

                <Typography className="mb-4" variant="headline">
                  ShowMoreText
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <ShowMoreText
                    text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium praesentium minus necessitatibus. Placeat, ratione ipsam dolor, quas iste obcaecati tenetur esse tempora quidem eveniet iure quasi repellat debitis doloribus? Distinctio iure quisquam ipsam minus dolorum corporis, eligendi iusto. Animi assumenda reprehenderit atque corrupti, a iste illo porro facilis maxime. Quod eaque ratione, ullam tempore blanditiis placeat odit, assumenda labore accusamus libero nostrum qui et architecto inventore atque, veritatis vitae nisi quas veniam sit! Quasi natus, neque sed soluta perspiciatis officiis?"
                    limit={30}
                  />
                </Block>
                <Block $marginBottom={theme.spacing(6)}>
                  <ShowMoreText
                    text="Custom show more. Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium praesentium minus necessitatibus. Placeat, ratione ipsam dolor, quas iste obcaecati tenetur esse tempora quidem eveniet iure quasi repellat debitis doloribus? Distinctio iure quisquam ipsam minus dolorum corporis, eligendi iusto. Animi assumenda reprehenderit atque corrupti, a iste illo porro facilis maxime. Quod eaque ratione, ullam tempore blanditiis placeat odit, assumenda labore accusamus libero nostrum qui et architecto inventore atque, veritatis vitae nisi quas veniam sit! Quasi natus, neque sed soluta perspiciatis officiis?"
                    limit={30}
                    showMore="Please show more"
                  />
                </Block>
                <Block $marginBottom={theme.spacing(6)}>
                  <ShowMoreText
                    text="Custom show more with button. Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium praesentium minus necessitatibus. Placeat, ratione ipsam dolor, quas iste obcaecati tenetur esse tempora quidem eveniet iure quasi repellat debitis doloribus? Distinctio iure quisquam ipsam minus dolorum corporis, eligendi iusto. Animi assumenda reprehenderit atque corrupti, a iste illo porro facilis maxime. Quod eaque ratione, ullam tempore blanditiis placeat odit, assumenda labore accusamus libero nostrum qui et architecto inventore atque, veritatis vitae nisi quas veniam sit! Quasi natus, neque sed soluta perspiciatis officiis?"
                    limit={30}
                    showMore={<Button variant="secondary" size="small" icon="plus" />}
                  />
                </Block>
                <Block $marginBottom={theme.spacing(6)}>
                  <GenericPlaceholder
                    title="Something went wrong"
                    subtitle="Please refresh the page or contact us if the error persists."
                    buttonTitle="Refresh the page"
                    buttonVariant="primary"
                    buttonAction={() => location.reload()}
                    image={<ErrorImage width="136" height="104" />}
                  />
                  <GenericPlaceholder
                    title="This add-on cannot be found"
                    subtitle="Could you enter another keyword?"
                    image={<EmptyImage width="136" height="104" />}
                  />
                </Block>
              </Container>
            ),
          },
          {
            title: 'Skeleton',
            link: SKELETON_TAB_URL,
            component: (
              <Container>
                <Typography className="mb-4" variant="headline">
                  Skeleton
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <Skeleton variant="connectorAvatar" size="small" />
                  <Skeleton variant="connectorAvatar" size="medium" />
                  <Skeleton variant="connectorAvatar" size="large" />
                  <Skeleton variant="userAvatar" size="small" />
                  <Skeleton variant="userAvatar" size="medium" />
                  <Skeleton variant="userAvatar" size="large" />
                </Block>
                <div>
                  <Skeleton className="mb-4" size="large" variant="circular" />
                  <Skeleton className="mb-4 h-3 w-30" variant="text" />
                  <Skeleton className="mb-4 h-3 w-1/2" variant="text" />
                  <Skeleton className="mb-4 h-3" variant="text" color="dark" />
                </div>
              </Container>
            ),
          },
          {
            title: 'Table',
            link: TABLE_TAB_URL,
            component: (
              <Container>
                <Typography className="mb-4" variant="headline">
                  Table
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <ChargeTable
                    name="graduated-charge-table"
                    data={chargeTableData}
                    onDeleteRow={() => {}}
                    columns={[
                      {
                        title: (
                          <Typography className="px-4" variant="bodyHl" color="grey700">
                            Name
                          </Typography>
                        ),
                        size: 300,
                        content: (row) => (
                          <TableContent>
                            <Avatar variant="user" identifier={row.name} size="small" />
                            <Typography>{row.name}</Typography>
                          </TableContent>
                        ),
                      },
                      {
                        title: (
                          <Typography className="px-4" variant="bodyHl" color="grey700">
                            Job
                          </Typography>
                        ),
                        size: 124,
                        mapKey: 'job',
                      },
                      {
                        title: (
                          <Typography className="px-4" variant="bodyHl" color="grey700">
                            Icon
                          </Typography>
                        ),
                        size: 124,
                        content: (row) => (
                          <TableContent>
                            <Icon color="primary" name={row.icon as IconName} />
                          </TableContent>
                        ),
                      },
                    ]}
                  />
                </Block>
                <Typography className="mb-4" variant="headline">
                  Display Table
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <Table
                    name="display-table"
                    containerSize={{
                      default: 4,
                      md: 48,
                    }}
                    data={tableData}
                    isLoading={false}
                    columns={[
                      {
                        key: 'status',
                        title: 'Status',
                        content: (row) => (
                          // @ts-expect-error
                          <Status label={row.status} type={StatusType.success} />
                        ),
                      },
                      {
                        key: 'id',
                        title: 'Invoice number',
                        content: (row) => <Typography variant="captionCode">{row.id}</Typography>,
                      },
                      {
                        key: 'amount',
                        title: 'Amount',

                        content: (row) => (
                          <Button
                            onClick={() => alert(`You clicked on ${row.amount}`)}
                            size="small"
                            variant="quaternary"
                          >
                            {intlFormatNumber(row.amount)}
                          </Button>
                        ),
                      },
                      {
                        key: 'customer',
                        title: 'Customer',
                        content: (row) => (
                          <Typography variant="captionCode" color="success600">
                            <Link to={'/'}>{row.customer}</Link>
                          </Typography>
                        ),
                      },
                      {
                        key: 'date',
                        title: 'Issuing date',
                        content: (row) => row.date,
                      },
                    ]}
                    onRowActionLink={(item) => `you clicked on ${item.id}`}
                    actionColumn={(currentItem) => [
                      currentItem.amount > 1000
                        ? {
                            title: 'Edit',
                            startIcon: 'pen',
                            onAction: (item) => {
                              alert(`You edited ${item.id}`)
                            },
                          }
                        : null,
                      {
                        title: 'Delete',
                        startIcon: 'trash',
                        onAction: (item) => {
                          alert(`You deleted ${item.id}`)
                        },
                      },
                    ]}
                  />

                  <Table
                    name="display-table"
                    containerSize={0}
                    rowSize={72}
                    data={currentUsageTableData}
                    isLoading={false}
                    columns={[
                      {
                        key: 'chargeName',
                        title: 'Customer',
                        content: (row) => (
                          <Box display={'grid'}>
                            <Typography variant="body" color="grey700" noWrap>
                              {row.chargeName}
                            </Typography>
                            <Typography variant="caption" color="grey600" noWrap>
                              {row.chargeCode}
                              {row.hasFilterBreakdown ? ' • with breakdown' : ''}
                            </Typography>
                          </Box>
                        ),
                      },
                      {
                        key: 'units',
                        title: 'Units',
                        content: (row) => (
                          <Typography variant="body" color="grey700">
                            {row.units}
                          </Typography>
                        ),
                      },
                      {
                        key: 'amount',
                        title: 'Amount',
                        textAlign: 'right',
                        content: (row) => (
                          <Typography variant="body" color="grey700">
                            {intlFormatNumber(row.amount)}
                          </Typography>
                        ),
                      },
                    ]}
                    onRowActionLink={(item) => `you clicked on ${item.id}`}
                  />

                  <Typography className="mb-4" variant="headline">
                    Virtualized horizontal Table
                  </Typography>

                  <AnalyticsStateProvider>
                    <HorizontalDataTable
                      leftColumnWidth={130}
                      data={fakeDataHorizontalTable}
                      rows={[
                        {
                          label: 'Breakout',
                          key: 'end_of_period_dt',
                          type: 'header',
                          content: (item) => {
                            return (
                              <Typography variant="captionHl">
                                {formatDateToTZ(
                                  item.end_of_period_dt,
                                  TimezoneEnum.TzUtc,
                                  'LLL yyyy',
                                )}
                              </Typography>
                            )
                          },
                        },
                        {
                          label: 'New',
                          key: 'mrr_new',
                          type: 'data',
                          content: (item) => {
                            return (
                              <Typography
                                variant="body"
                                className={tw({
                                  'text-green-600': item.mrr_new > 0,
                                  'text-grey-500': item.mrr_new === 0,
                                  'text-red-600': item.mrr_new < 0,
                                })}
                              >
                                {intlFormatNumber(
                                  deserializeAmount(
                                    item.mrr_new || 0,
                                    formikProps.values.amountCurrency,
                                  ),
                                  {
                                    currencyDisplay: 'symbol',
                                    currency: formikProps.values.amountCurrency,
                                  },
                                )}
                              </Typography>
                            )
                          },
                        },
                        {
                          label: 'Expansion',
                          key: 'mrr_expansion',
                          type: 'data',
                          content: (item) => {
                            return (
                              <Typography
                                variant="body"
                                className={tw({
                                  'text-green-600': item.mrr_expansion > 0,
                                  'text-grey-500': item.mrr_expansion === 0,
                                  'text-red-600': item.mrr_expansion < 0,
                                })}
                              >
                                {intlFormatNumber(
                                  deserializeAmount(
                                    item.mrr_expansion || 0,
                                    formikProps.values.amountCurrency,
                                  ),
                                  {
                                    currencyDisplay: 'symbol',
                                    currency: formikProps.values.amountCurrency,
                                  },
                                )}
                              </Typography>
                            )
                          },
                        },
                        {
                          label: 'Contraction',
                          key: 'mrr_contraction',
                          type: 'data',
                          content: (item) => {
                            return (
                              <Typography
                                variant="body"
                                className={tw({
                                  'text-green-600': item.mrr_contraction > 0,
                                  'text-grey-500': item.mrr_contraction === 0,
                                  'text-red-600': item.mrr_contraction < 0,
                                })}
                              >
                                {intlFormatNumber(
                                  deserializeAmount(
                                    item.mrr_contraction || 0,
                                    formikProps.values.amountCurrency,
                                  ),
                                  {
                                    currencyDisplay: 'symbol',
                                    currency: formikProps.values.amountCurrency,
                                  },
                                )}
                              </Typography>
                            )
                          },
                        },
                        {
                          label: 'Churn',
                          key: 'mrr_churn',
                          type: 'data',
                          content: (item) => {
                            return (
                              <Typography
                                variant="body"
                                className={tw({
                                  'text-red-600': item.mrr_churn < 0,
                                })}
                              >
                                {intlFormatNumber(
                                  deserializeAmount(
                                    item.mrr_churn || 0,
                                    formikProps.values.amountCurrency,
                                  ),
                                  {
                                    currencyDisplay: 'symbol',
                                    currency: formikProps.values.amountCurrency,
                                  },
                                )}
                              </Typography>
                            )
                          },
                        },
                        {
                          label: 'Summary',
                          key: 'end_of_period_dt',
                          type: 'header',
                          content: (item) => {
                            return (
                              <Typography variant="captionHl">
                                {formatDateToTZ(
                                  item.end_of_period_dt,
                                  TimezoneEnum.TzUtc,
                                  'LLL yyyy',
                                )}
                              </Typography>
                            )
                          },
                        },
                        {
                          label: 'Starting MRR',
                          key: 'starting_mrr',
                          type: 'data',
                          content: (item) => {
                            return (
                              <Typography
                                variant="body"
                                className={tw({
                                  'text-green-600': item.starting_mrr > 0,
                                  'text-grey-500': item.starting_mrr === 0,
                                  'text-red-600': item.starting_mrr < 0,
                                })}
                              >
                                {intlFormatNumber(
                                  deserializeAmount(
                                    item.starting_mrr || 0,
                                    formikProps.values.amountCurrency,
                                  ),
                                  {
                                    currencyDisplay: 'symbol',
                                    currency: formikProps.values.amountCurrency,
                                  },
                                )}
                              </Typography>
                            )
                          },
                        },
                        {
                          label: 'Change',
                          key: 'mrr_change',
                          type: 'data',
                          content: (item) => {
                            return (
                              <Typography
                                variant="body"
                                className={tw({
                                  'text-green-600': item.mrr_change > 0,
                                  'text-grey-500': item.mrr_change === 0,
                                  'text-red-600': item.mrr_change < 0,
                                })}
                              >
                                {intlFormatNumber(
                                  deserializeAmount(
                                    item.mrr_change || 0,
                                    formikProps.values.amountCurrency,
                                  ),
                                  {
                                    currencyDisplay: 'symbol',
                                    currency: formikProps.values.amountCurrency,
                                  },
                                )}
                              </Typography>
                            )
                          },
                        },
                        {
                          label: 'Ending MRR',
                          key: 'ending_mrr',
                          type: 'data',
                          content: (item) => {
                            return (
                              <Typography
                                variant="body"
                                className={tw({
                                  'text-green-600': item.ending_mrr > 0,
                                  'text-grey-500': item.ending_mrr === 0,
                                  'text-red-600': item.ending_mrr < 0,
                                })}
                              >
                                {intlFormatNumber(
                                  deserializeAmount(
                                    item.ending_mrr || 0,
                                    formikProps.values.amountCurrency,
                                  ),
                                  {
                                    currencyDisplay: 'symbol',
                                    currency: formikProps.values.amountCurrency,
                                  },
                                )}
                              </Typography>
                            )
                          },
                        },
                        {
                          label: 'TOTAL',
                          key: 'id',
                          type: 'data',
                          content: (item) => {
                            const total =
                              item.mrr_new +
                              item.mrr_expansion +
                              item.mrr_contraction -
                              item.mrr_churn

                            return (
                              <Typography
                                variant="body"
                                className={tw({
                                  'text-green-600': total > 0,
                                  'text-grey-500': total === 0,
                                  'text-red-600': total < 0,
                                })}
                              >
                                {intlFormatNumber(
                                  deserializeAmount(total || 0, formikProps.values.amountCurrency),
                                  {
                                    currencyDisplay: 'symbol',
                                    currency: formikProps.values.amountCurrency,
                                  },
                                )}
                              </Typography>
                            )
                          },
                        },
                      ]}
                    />
                  </AnalyticsStateProvider>
                </Block>
              </Container>
            ),
          },
          {
            title: 'Avatar',
            link: AVATAR_TAB_URL,
            component: (
              <Container>
                <Typography className="mb-4" variant="headline">
                  Avatar
                </Typography>
                <Typography className="mb-4" variant="subhead">
                  Variants
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <Tooltip title="Connector with icon">
                    <Avatar variant="connector">
                      <Icon name="pulse" color="dark" />
                    </Avatar>
                  </Tooltip>
                  <Tooltip title="Connector with avatar badge">
                    <Avatar variant="connector">
                      <Icon name="pulse" color="dark" />
                      <AvatarBadge icon="stop" color="error" />
                    </Avatar>
                  </Tooltip>
                  <Tooltip title="Connector with image">
                    <Avatar variant="connector-full">
                      <Stripe />
                    </Avatar>
                  </Tooltip>
                  <Tooltip title="Company">
                    <Avatar
                      variant="company"
                      identifier="Lago Corp"
                      initials={'Lago Corp'.split(' ').reduce((acc, n) => (acc = acc + n[0]), '')}
                    />
                  </Tooltip>
                  <Tooltip title="User">
                    <Avatar variant="user" identifier="Morguy" initials="ML" />
                  </Tooltip>
                </Block>

                <Typography className="mb-4" variant="subhead">
                  Size
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <div className="not-last-child:mb-4">
                    <Avatar variant="user" size="small" identifier="Morguy" initials="ML" />
                    <Avatar variant="user" size="intermediate" identifier="Morguy" initials="ML" />
                    <Avatar variant="user" size="medium" identifier="Morguy" initials="ML" />
                    <Avatar variant="user" size="large" identifier="Morguy" initials="ML" />
                  </div>
                  <div className="not-last-child:mb-4">
                    <Avatar variant="company" size="small" identifier="Lago Corp" />
                    <Avatar variant="company" size="intermediate" identifier="Lago Corp" />
                    <Avatar variant="company" size="medium" identifier="Lago Corp" />
                    <Avatar variant="company" size="large" identifier="Lago Corp" />
                  </div>
                  <div className="not-last-child:mb-4">
                    <Avatar variant="connector" size="tiny">
                      <Icon name="pulse" color="dark" />
                    </Avatar>
                    <Avatar variant="connector" size="small">
                      <Icon name="pulse" color="dark" />
                    </Avatar>
                    <Avatar variant="connector" size="intermediate">
                      <Icon name="pulse" color="dark" />
                    </Avatar>
                    <Avatar variant="connector" size="medium">
                      <Icon name="pulse" color="dark" />
                    </Avatar>
                    <Avatar variant="connector" size="big">
                      <Icon name="pulse" color="dark" />
                      <AvatarBadge icon="stop" color="info" size="big" />
                    </Avatar>
                    <Avatar variant="connector" size="large">
                      <Icon name="pulse" color="dark" />
                      <AvatarBadge icon="stop" color="warning" size="large" />
                    </Avatar>
                  </div>

                  <Avatar variant="connector" size="medium">
                    <Stripe />
                  </Avatar>
                  <Avatar variant="connector" size="large">
                    <Stripe />
                  </Avatar>
                </Block>

                <Typography className="mb-4" variant="subhead">
                  Colors
                </Typography>
                <Typography className="mb-4">
                  Color is defined automatically based on initials or identifier
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <Avatar variant="company" identifier="AA" />
                  <Avatar variant="company" identifier="AB" />
                  <Avatar variant="company" identifier="AC" />
                  <Avatar variant="company" identifier="AD" />
                  <Avatar variant="company" identifier="AE" />
                  <Avatar variant="company" identifier="AF" />
                  <Avatar variant="company" identifier="AG" />
                  <Avatar variant="company" identifier="AH" />
                </Block>
              </Container>
            ),
          },
          {
            title: 'Icons',
            link: ICONS_TAB_URL,
            component: (
              <Container>
                <Typography className="mb-4" variant="headline">
                  Icons
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  {Object.keys(ALL_ICONS).map((iconName, i) => (
                    <Icon key={`icon-${i}`} name={iconName as IconName} />
                  ))}
                </Block>
                <Typography className="mb-4" variant="headline">
                  Colors
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <Icon name="plug" color="success" />
                  <Icon name="plug" color="error" />
                  <Icon name="plug" color="warning" />
                  <Icon name="plug" color="info" />
                  <Icon name="plug" color="light" />
                  <Icon name="plug" color="dark" />
                  <Icon name="plug" color="skeleton" />
                  <Icon name="plug" color="disabled" />
                  <Icon name="plug" color="input" />
                  <Icon name="plug" color="primary" />
                </Block>
                <Typography className="mb-4" variant="headline">
                  Animation
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <Icon name="processing" animation="spin" />
                  <Icon name="star-filled" animation="pulse" />
                </Block>

                <Typography className="mb-4" variant="headline">
                  Size
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <Icon name="puzzle" size="small" />
                  <Icon name="puzzle" size="medium" />
                  <Icon name="puzzle" size="large" />
                </Block>
              </Container>
            ),
          },
          {
            title: 'Typography',
            link: TYPOGRAPHY_TAB_URL,
            component: (
              <Container>
                <Typography className="mb-4" variant="headline">
                  Typography
                </Typography>
                <Block>
                  <VerticalBlock $marginRight={theme.spacing(12)}>
                    <Typography className="mb-4" variant="subhead">
                      Variant
                    </Typography>
                    <Typography variant="headline">Headline</Typography>
                    <Typography variant="subhead">Subhead</Typography>
                    <Typography variant="bodyHl">BodyHl</Typography>
                    <Typography variant="body">Body</Typography>
                    <Typography variant="button">Button</Typography>
                    <Typography variant="caption">Caption</Typography>
                    <Typography variant="captionHl">CaptionHl</Typography>
                    <Typography variant="captionCode">CaptionCode</Typography>
                    <Typography variant="note">Note</Typography>
                    <Typography variant="noteHl">NoteHl</Typography>
                    <Typography blur>Amma blurred text</Typography>
                    <Typography
                      color="textSecondary"
                      html="I'm a bit <b>special</b>, I <i>understand</i> html"
                    />
                  </VerticalBlock>
                  <VerticalBlock>
                    <Typography className="mb-4" variant="subhead">
                      Color
                    </Typography>
                    <Typography color="textSecondary">color textSecondary</Typography>
                    <Typography color="textPrimary">color textPrimary</Typography>
                    <Typography color="primary600">color primary600</Typography>
                    <Typography color="grey700">color grey700</Typography>
                    <Typography color="grey600">color grey600</Typography>
                    <Typography color="grey500">color grey500</Typography>
                    <Typography color="disabled">color disabled</Typography>
                    <Typography color="danger600">color danger600</Typography>
                    <Typography color="white">color white</Typography>
                  </VerticalBlock>
                </Block>
              </Container>
            ),
          },
          {
            title: 'Buttons',
            link: BUTTON_TAB_URL,
            component: (
              <Container>
                <Typography className="mb-4" variant="headline">
                  Button
                </Typography>

                <Typography className="mb-4" variant="subhead">
                  General use
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <Button variant="primary" size="large">
                    Large
                  </Button>
                  <Button variant="primary" size="medium">
                    Medium
                  </Button>
                  <Button variant="primary" size="small">
                    Small
                  </Button>
                  <Button variant="primary" icon="coupon" size="large" />
                  <Button variant="primary" icon="download" size="medium" />
                  <Button variant="primary" icon="trash" size="small" />
                  <Button variant="primary" endIcon="rocket">
                    End Icon
                  </Button>
                  <Button variant="primary" startIcon="rocket">
                    Start Icon
                  </Button>
                  <Button variant="primary" loading>
                    Loading
                  </Button>
                  <Button
                    variant="primary"
                    onClick={async () => await new Promise((r) => setTimeout(r, 1000))}
                  >
                    With Promise
                  </Button>
                </Block>

                <Typography className="mb-4" variant="subhead">
                  Primary
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <Button variant="primary">Default</Button>
                  <Button variant="primary" disabled>
                    Disabled
                  </Button>
                  <Button variant="primary" danger>
                    Danger
                  </Button>
                </Block>

                <Typography className="mb-4" variant="subhead">
                  Secondary
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <Button variant="secondary">Default</Button>
                  <Button variant="secondary" size="large">
                    Large
                  </Button>
                  <Button variant="secondary" size="medium">
                    Medium
                  </Button>
                  <Button variant="secondary" size="small">
                    Small
                  </Button>
                  <Button variant="secondary" disabled>
                    Disabled
                  </Button>
                  <Button variant="secondary" danger>
                    Danger
                  </Button>
                </Block>

                <Typography className="mb-4" variant="subhead">
                  Tertiary
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <Button variant="tertiary">Default</Button>
                  <Button variant="tertiary" size="large">
                    Large
                  </Button>
                  <Button variant="tertiary" size="medium">
                    Medium
                  </Button>
                  <Button variant="tertiary" size="small">
                    Small
                  </Button>
                  <Button variant="tertiary" disabled>
                    Disabled
                  </Button>
                  <Button variant="tertiary" danger>
                    Danger
                  </Button>
                </Block>

                <Typography className="mb-4" variant="subhead">
                  Quaternary
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <Button variant="quaternary">Default</Button>
                  <Button variant="quaternary" size="large">
                    Large
                  </Button>
                  <Button variant="quaternary" size="medium">
                    Medium
                  </Button>
                  <Button variant="quaternary" size="small">
                    small
                  </Button>
                  <Button variant="quaternary" startIcon="plus" size="small">
                    Add
                  </Button>
                  <Button variant="quaternary" disabled>
                    Disabled
                  </Button>
                  <Button variant="quaternary" danger>
                    Danger
                  </Button>
                </Block>

                <Typography className="mb-4" variant="subhead">
                  Google connect
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <Button fullWidth startIcon="google" size="large" variant="tertiary">
                    Log In with Google
                  </Button>
                </Block>
              </Container>
            ),
          },
          {
            title: 'Form',
            link: FORM_TAB_URL,
            component: (
              <Container>
                <Form onSubmit={(e) => e.preventDefault()}>
                  <Typography className="mb-4" variant="headline">
                    Form
                  </Typography>

                  <Typography className="mb-4" variant="subhead">
                    Checkbox
                  </Typography>

                  <Block $marginBottom={theme.spacing(6)}>
                    <Checkbox
                      name="checkboxCond3"
                      canBeIndeterminate
                      value={
                        formikProps.values.checkboxCond1 && formikProps.values.checkboxCond2
                          ? true
                          : !formikProps.values.checkboxCond1 && !formikProps.values.checkboxCond2
                            ? false
                            : undefined
                      }
                      onChange={(e, value) => {
                        if (value) {
                          formikProps.setFieldValue('checkboxCond1', true)
                          formikProps.setFieldValue('checkboxCond2', true)
                        } else {
                          formikProps.setFieldValue('checkboxCond1', false)
                          formikProps.setFieldValue('checkboxCond2', false)
                        }
                      }}
                      label="Accept all conditions or else you won't be able to become the incredibly talented person you want to become (we know, life is unfair)"
                      error={
                        !formikProps.values.checkboxCond1 || !formikProps.values.checkboxCond2
                          ? 'Sorry you need to accept both'
                          : undefined
                      }
                    />

                    <CheckboxField
                      name="checkboxCond1"
                      formikProps={formikProps}
                      value={formikProps.values.checkboxCond1}
                      label="Accept the insane condition"
                    />

                    <CheckboxField
                      name="checkboxCond2"
                      formikProps={formikProps}
                      value={formikProps.values.checkboxCond2}
                      label="Accept the smart condition"
                    />

                    <CheckboxField
                      name="checkboxCond1"
                      formikProps={formikProps}
                      disabled
                      value={formikProps.values.checkboxCond1}
                      label="Insane condition you can't remove"
                    />

                    <CheckboxField
                      name="checkboxCond2"
                      formikProps={formikProps}
                      disabled
                      value={formikProps.values.checkboxCond2}
                      label="Smart condition you can't remove"
                    />

                    <CheckboxField
                      name="checkboxCond2"
                      formikProps={formikProps}
                      value={formikProps.values.checkboxCond2}
                      label="Label"
                      sublabel="Sublabel"
                    />
                    <CheckboxField
                      disabled
                      name="checkboxCond2"
                      formikProps={formikProps}
                      value={formikProps.values.checkboxCond2}
                      label="Label"
                      sublabel="Sublabel"
                    />
                  </Block>

                  <Typography className="mb-4" variant="subhead">
                    ButtonSelector
                  </Typography>
                  <Block $marginBottom={theme.spacing(6)}>
                    <ButtonSelectorField
                      name="buttonSelector"
                      label="You'd rather..."
                      description="Be careful with your choice"
                      infoText="You WILL be judge on the answer"
                      formikProps={formikProps}
                      options={[
                        {
                          label: '...talk like Yoda',
                          value: 'yoda',
                        },
                        {
                          label: '...Breath like Darth Vader',
                          value: 'vador',
                        },
                      ]}
                    />
                    <ButtonSelectorField
                      name="buttonSelector"
                      label="You'd rather..."
                      formikProps={formikProps}
                      disabled
                      options={[
                        {
                          label: '...talk like Yoda',
                          value: 'yoda',
                        },
                        {
                          label: '...Breath like Darth Vader',
                          value: 'vador',
                        },
                      ]}
                    />
                  </Block>

                  <Typography className="mb-4" variant="subhead">
                    Switch
                  </Typography>
                  <Block $marginBottom={theme.spacing(6)}>
                    <SwitchField
                      name="switch"
                      formikProps={formikProps}
                      label="How do you feel today ?"
                      subLabel={formikProps.values.switch ? '' : 'Wanna talk about it ? Call 911.'}
                    />
                    <SwitchField
                      name="switch"
                      formikProps={formikProps}
                      label="Disabled"
                      disabled
                    />
                    <SwitchField
                      name="switch"
                      formikProps={formikProps}
                      label="How do you feel today ?"
                      subLabel="I really wanna know"
                      labelPosition="left"
                    />
                  </Block>

                  <Typography className="mb-4" variant="subhead">
                    Combobox
                  </Typography>
                  <Block $marginBottom={theme.spacing(6)}>
                    <ComboBoxField
                      name="combobox"
                      data={'abcdefghijklmnopqrstuvwxyz'.split('').map((letter, i) => ({
                        value: `${letter}-${i}`,
                        group: Math.round(i / 5) + '',
                        description: `I am a description for ${letter}`,
                      }))}
                      label="Grouped by - virtualized"
                      description="You can type anything to see the magic happen"
                      placeholder="Placeholder"
                      formikProps={formikProps}
                    />
                    <ComboBoxField
                      name="combobox"
                      data={'abcdefghijklmnopqrstuvwxyz'.split('').map((letter, i) => ({
                        value: `${letter}-${i}`,
                      }))}
                      label="Not grouped - virtualized"
                      placeholder="Placeholder"
                      formikProps={formikProps}
                    />
                    <ComboBoxField
                      name="combobox"
                      virtualized={false}
                      data={'abcdefghijklmnopqrstuvwxyz'.split('').map((letter, i) => ({
                        value: `${letter}-${i}`,
                      }))}
                      label="Not grouped - normal"
                      placeholder="Placeholder"
                      formikProps={formikProps}
                    />
                    <ComboBoxField
                      name="combobox"
                      virtualized={false}
                      data={'abcdefghijklmnopqrstuvwxyz'.split('').map((letter, i) => ({
                        value: `${letter}-${i}`,
                        description: `I am a description for ${letter}`,
                      }))}
                      label="With description"
                      placeholder="Placeholder"
                      formikProps={formikProps}
                    />
                    <ComboBoxField
                      name="combobox"
                      virtualized={false}
                      data={'abcdefghijklmnopqrstuvwxyz'.split('').map((letter, i) => ({
                        value: `${letter}-${i}`,
                        group: Math.round(i / 5) + '',
                      }))}
                      renderGroupHeader={{
                        '0': (
                          <ComboboxHeader>
                            <Typography variant="captionHl" color="textSecondary">
                              The good •&#32;
                            </Typography>
                            <Typography component="span" variant="caption" noWrap>
                              Based on several survey
                            </Typography>
                          </ComboboxHeader>
                        ),
                        '1': (
                          <ComboboxHeader>
                            <Typography variant="captionHl" color="textSecondary">
                              The bad •&#32;
                            </Typography>
                            <Typography component="span" variant="caption" noWrap>
                              Because I say so
                            </Typography>
                          </ComboboxHeader>
                        ),
                        '2': (
                          <ComboboxHeader>
                            <Typography variant="captionHl" color="textSecondary">
                              The ugly •&#32;
                            </Typography>
                            <Typography component="span" variant="caption" noWrap>
                              Don&apos;t look at it
                            </Typography>
                          </ComboboxHeader>
                        ),
                      }}
                      label="Grouped by - normal - custom headers"
                      placeholder="Placeholder"
                      formikProps={formikProps}
                    />
                    <ComboBoxField
                      name="combobox"
                      virtualized={false}
                      data={'abcdefghijklmnopqrstuvwxyz'.split('').map((letter, i) => ({
                        value: `${letter}-${i}`,
                        group: Math.round(i / 5) + '',
                      }))}
                      renderGroupHeader={{
                        '0': (
                          <ComboboxHeader>
                            <Typography variant="captionHl" color="textSecondary">
                              The good •&#32;
                            </Typography>
                            <Typography component="span" variant="caption" noWrap>
                              Based on several survey
                            </Typography>
                          </ComboboxHeader>
                        ),
                        '1': (
                          <ComboboxHeader>
                            <Typography variant="captionHl" color="textSecondary">
                              The bad •&#32;
                            </Typography>
                            <Typography component="span" variant="caption" noWrap>
                              Because I say so
                            </Typography>
                          </ComboboxHeader>
                        ),
                        '2': (
                          <ComboboxHeader>
                            <Typography variant="captionHl" color="textSecondary">
                              The ugly •&#32;
                            </Typography>
                            <Typography component="span" variant="caption" noWrap>
                              Don&apos;t look at it
                            </Typography>
                          </ComboboxHeader>
                        ),
                      }}
                      renderGroupInputStartAdornment={{
                        0: 'The good',
                        1: 'The bad',
                        2: 'The ugly',
                      }}
                      label="Grouped by - normal - custom headers - Input start adornment"
                      placeholder="Placeholder"
                      formikProps={formikProps}
                    />
                    <ComboBoxField
                      name="combobox"
                      virtualized={false}
                      data={'abcdefghijklmnopqrstuvwxyz'.split('').map((letter, i) => ({
                        value: `${letter}-${i}`,
                        group: Math.round(i / 5) + '',
                        description: `I am a description for ${letter}`,
                      }))}
                      label="Grouped by with description"
                      placeholder="Placeholder"
                      formikProps={formikProps}
                    />

                    <ComboBoxField
                      name="combobox"
                      data={[]}
                      label="Loading"
                      placeholder="But who is it anyway ?"
                      loading
                      formikProps={formikProps}
                    />
                    <ComboBoxField
                      name="combobox"
                      data={[]}
                      label="Disabled"
                      placeholder="You don't get to answer"
                      disabled
                      formikProps={formikProps}
                    />

                    <MultipleComboBoxField
                      name="multipleCombobox"
                      data={'abcdefghijklmnopqrstuvwxyz'.split('').map((letter, i) => ({
                        value: `${letter}-${i}`,
                      }))}
                      label="Multiple"
                      placeholder="Placeholder"
                      formikProps={formikProps}
                    />
                    <MultipleComboBoxField
                      name="multipleCombobox"
                      data={'abcdefghijklmnopqrstuvwxyz'.split('').map((letter, i) => ({
                        value: `${letter}-${i}`,
                        description: `I am a description for ${letter}`,
                      }))}
                      label="Multiple with description"
                      placeholder="Placeholder"
                      formikProps={formikProps}
                    />
                    <MultipleComboBoxField
                      disableCloseOnSelect
                      name="multipleCombobox"
                      data={'abcdefghijklmnopqrstuvwxyz'.split('').map((letter, i) => ({
                        value: `${letter}-${i}`,
                        group: Math.round(i / 5) + '',
                        description: `I am a description for ${letter}`,
                      }))}
                      label="Multiple disableCloseOnSelect"
                      placeholder="Placeholder"
                      formikProps={formikProps}
                    />
                    <MultipleComboBoxField
                      freeSolo
                      name="multipleCombobox"
                      data={'abcdefghijklmnopqrstuvwxyz'.split('').map((letter, i) => ({
                        value: `${letter}-${i}`,
                        group: Math.round(i / 5) + '',
                      }))}
                      label="Multiple Free Solo"
                      placeholder="Placeholder"
                      formikProps={formikProps}
                    />
                    <MultipleComboBoxField
                      freeSolo
                      showOptionsOnlyWhenTyping
                      name="multipleCombobox"
                      label="Multiple No Data freeSolo showOptionsOnlyWhenTyping"
                      placeholder="Placeholder"
                      formikProps={formikProps}
                    />
                    {formikProps.values.multipleCombobox.length > 0 && (
                      <Stack gap={1} direction="row" flexWrap="wrap">
                        {formikProps.values.multipleCombobox.map(
                          (value: { value: string }, index) => (
                            <Chip
                              key={index}
                              label={value.value}
                              onDelete={() => {
                                const newValues = formikProps.values.multipleCombobox.filter(
                                  (v) => v !== value,
                                )

                                formikProps.setFieldValue('multipleCombobox', newValues)
                              }}
                            />
                          ),
                        )}
                      </Stack>
                    )}
                    <MultipleComboBox
                      freeSolo
                      hideTags
                      disableClearable
                      showOptionsOnlyWhenTyping
                      data={[]}
                      onChange={(newValue) =>
                        formikProps.setFieldValue('multipleCombobox', newValue)
                      }
                      value={formikProps.values.multipleCombobox}
                      label="Multiple No Data freeSolo hideTags disableClearable allowSameValue showOptionsOnlyWhenTyping"
                      placeholder="Placeholder"
                    />
                  </Block>

                  <Typography className="mb-4" variant="subhead">
                    Radio
                  </Typography>
                  <Block $marginBottom={theme.spacing(6)}>
                    <RadioField
                      name="radio"
                      formikProps={formikProps}
                      value="chocolatine"
                      label="Chocolatine"
                    />
                    <RadioField
                      name="radio"
                      formikProps={formikProps}
                      value="painauchocolat"
                      label="Pain au chocolat"
                      sublabel="The right answer"
                    />
                    <RadioField
                      value="painauchocolat"
                      name="radio"
                      formikProps={formikProps}
                      label="Disabled"
                      sublabel="I'm disabled too"
                      disabled
                    />
                    <RadioField
                      name="radio"
                      formikProps={formikProps}
                      value="painauchocolat"
                      label="Radio with a very long label - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
                      sublabel="The right answer"
                    />
                  </Block>

                  <Typography className="mb-4" variant="subhead">
                    DatePicker
                  </Typography>
                  <Block $childMinWidth="325px" $marginBottom={theme.spacing(6)}>
                    <DatePickerField
                      name="date"
                      label="When is Morguy's birthday ?"
                      formikProps={formikProps}
                    />
                    <DatePickerField
                      name="date"
                      label="DatePicker with helper"
                      helperText="I'm here to help"
                      formikProps={formikProps}
                    />
                    <DatePickerField
                      name="date"
                      label="DatePicker disabled"
                      disabled
                      formikProps={formikProps}
                    />
                  </Block>

                  <Typography className="mb-4" variant="subhead">
                    AmountInput
                  </Typography>
                  <Block $marginBottom={theme.spacing(6)}>
                    <AmountInputField
                      beforeChangeFormatter={['positiveNumber']}
                      currency={formikProps.values.amountCurrency}
                      formikProps={formikProps}
                      label="Amount"
                      name="amountCents"
                      description='Amount in "cents" (1€ = 100 cents)'
                    />
                    <ComboBoxField
                      name="amountCurrency"
                      data={Object.values(CurrencyEnum).map((currencyType) => ({
                        value: currencyType,
                      }))}
                      label="currency"
                      description="Select your currency"
                      placeholder="Placeholder"
                      isEmptyNull={false}
                      disableClearable
                      formikProps={formikProps}
                    />
                  </Block>

                  <Typography className="mb-4" variant="subhead">
                    TextInput
                  </Typography>
                  <Block $marginBottom={theme.spacing(6)}>
                    <TextInputField
                      label="Label"
                      placeholder="Type something"
                      name="input"
                      formikProps={formikProps}
                      InputProps={{
                        endAdornment: <InputAdornment position="end">Dias</InputAdornment>,
                      }}
                    />
                    <TextInputField
                      label="With decimal formatter"
                      name="inputNumber"
                      placeholder="Type number"
                      beforeChangeFormatter={['decimal']}
                      formikProps={formikProps}
                    />
                    <TextInputField
                      label="With triDecimal formatter"
                      name="inputNumber"
                      placeholder="Type number"
                      beforeChangeFormatter={['triDecimal']}
                      formikProps={formikProps}
                    />
                    <TextInputField
                      label="With quadDecimal formatter"
                      name="inputNumber"
                      placeholder="Type number"
                      beforeChangeFormatter={['quadDecimal']}
                      formikProps={formikProps}
                    />
                    <TextInputField
                      label="Cleanable"
                      name="input"
                      placeholder="Type something"
                      formikProps={formikProps}
                      cleanable
                    />
                    <TextInputField
                      label="Password"
                      placeholder="Type something"
                      name="input"
                      formikProps={formikProps}
                      password
                    />
                    <TextInputField
                      label="With infotext"
                      placeholder="Type something"
                      name="input"
                      formikProps={formikProps}
                      infoText="I'm giving you some infos"
                    />
                    <TextInputField
                      label="Disabled"
                      placeholder="Type something"
                      name="input"
                      formikProps={formikProps}
                      disabled
                      InputProps={{
                        endAdornment: <InputAdornment position="end">Dias</InputAdornment>,
                      }}
                    />
                    <TextInputField
                      label="With helpertext"
                      placeholder="Type something"
                      name="input"
                      formikProps={formikProps}
                      helperText="I'm here to help"
                    />
                    <TextInputField
                      label="With description"
                      placeholder="Type something"
                      name="input"
                      formikProps={formikProps}
                      description="I'm here to help"
                    />
                  </Block>

                  <Typography className="mb-4" variant="subhead">
                    JSON Editor
                  </Typography>
                  <Block $marginBottom={theme.spacing(6)}>
                    <JsonEditorField
                      name="json"
                      label="With small editor and overlay"
                      description='Click on "expand" to remove the overlay'
                      infoText="Some tips"
                      formikProps={formikProps}
                      onExpand={(deleteOverlay) => {
                        deleteOverlay()
                      }}
                      helperText="Until you can't see the last line in the editor, you will see the expand overlay"
                    />

                    <JsonEditorField
                      name="jsonLong"
                      label="With height"
                      formikProps={formikProps}
                      height="300px"
                    />
                  </Block>

                  <Button onClick={formikProps.submitForm}>Check your answers</Button>
                </Form>
              </Container>
            ),
          },
          {
            title: 'Links',
            link: LINK_TAB_URL,
            component: (
              <Container>
                <Typography className="mb-4" variant="headline">
                  Links
                </Typography>
                <Typography className="mb-4" variant="subhead">
                  Link in navigation tabs with &#60;ButtonLink/&#62;
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <ButtonLink type="tab" icon="rocket" to={ONLY_DEV_DESIGN_SYSTEM_ROUTE}>
                    Non active Link
                  </ButtonLink>
                  <ButtonLink type="tab" active icon="plug" to={ONLY_DEV_DESIGN_SYSTEM_ROUTE}>
                    Active
                  </ButtonLink>
                  <ButtonLink
                    type="tab"
                    icon="plug"
                    external
                    to="https://www.youtube.com/watch?v=h6fcK_fRYaI&ab_channel=Kurzgesagt%E2%80%93InaNutshell"
                  >
                    External
                  </ButtonLink>
                  <ButtonLink type="tab" disabled to={ONLY_DEV_DESIGN_SYSTEM_ROUTE}>
                    Disabled
                  </ButtonLink>
                </Block>
                <Typography className="mb-4" variant="subhead">
                  Button Links with &#60;ButtonLink/&#62;
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <ButtonLink type="button" to={ONLY_DEV_DESIGN_SYSTEM_ROUTE}>
                    Internal
                  </ButtonLink>
                  <ButtonLink
                    type="button"
                    external
                    to="https://www.youtube.com/watch?v=h6fcK_fRYaI&ab_channel=Kurzgesagt%E2%80%93InaNutshell"
                  >
                    External
                  </ButtonLink>

                  <ButtonLink
                    type="button"
                    buttonProps={{ variant: 'tertiary', startIcon: 'bell' }}
                    to={ONLY_DEV_DESIGN_SYSTEM_ROUTE}
                  >
                    With Button Props
                  </ButtonLink>
                </Block>
                <Typography className="mb-4" variant="subhead">
                  Simple links with &#60;a/&#62;
                </Typography>
                <Block $marginBottom={theme.spacing(6)}>
                  <a href="https://main-app.staging.getlago.com/coupons"> Normal Link </a>
                </Block>
              </Container>
            ),
          },
          // disabled simple tab
          {
            disabled: true,
            title: 'Disabled',
            link: '',
            component: <></>,
          },
        ]}
      />
    </>
  )
}

const Container = styled.div`
  padding: ${theme.spacing(8)} ${theme.spacing(12)} ${theme.spacing(20)};
`

const Form = styled.form`
  > *:first-child {
    margin-bottom: ${theme.spacing(4)};
  }
`

const Block = styled.div<{ $childMinWidth?: string; $marginBottom?: string }>`
  display: flex;
  gap: ${theme.spacing(4)};
  flex-wrap: wrap;

  ${({ $childMinWidth }) =>
    !!$childMinWidth &&
    css`
      > * {
        min-width: ${$childMinWidth};
      }
    `}

  ${({ $marginBottom }) =>
    !!$marginBottom &&
    css`
      > * {
        margin-bottom: ${$marginBottom};
      }
    `}
`

const VerticalBlock = styled.div<{ $marginRight?: string }>`
  ${({ $marginRight }) =>
    !!$marginRight &&
    css`
      > * {
        margin-right: ${$marginRight};
      }
    `}

  > * {
    margin-bottom: ${theme.spacing(4)};
  }
`

const TableContent = styled.div`
  display: flex;
  align-items: center;
  padding: 0 ${theme.spacing(2)};

  > * {
    margin-right: ${theme.spacing(4)};
  }
`

const ComboboxHeader = styled.div`
  display: flex;
  width: 100%;

  > * {
    white-space: nowrap;

    &:first-child {
      margin-right: ${theme.spacing(1)};
    }
    &:last-child {
      min-width: 0;
    }
  }
`

export default DesignSystem
